<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品管理</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
    <script type="text/javascript" src="../../js/jquery-3.4.1.js"></script>
</head>
<body>
<!--流式布局-->
<div class="layui-fluid">
    <div class="layui-card">
        <!-- head: 数据表格搜索 -->
        <div class="layui-card-header">
            <div class="layui-form">
                <!-- 搜索条件input -->
                <!-- 搜索按钮，已经使用表格的toolbar -->
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <select class="layui-select" name="search-name-val" lay-search></select>
                    </div>
                    <div class="layui-inline">
                        <select name="search-type-val"></select>
                    </div>

                </div>
            </div>
        </div>
        <!-- body: 数据表格（工具条、表格内容） -->
        <!-- 表格头工具按钮组-->
        <div id="LAY-table-bar" class="layui-btn-group layui-hide">
            <button type="button" class="layui-btn layui-btn-radius layui-btn-normal" lay-event="add">
                <i class="layui-icon">&#xe642;添加</i>
            </button>
            <button type="button" class="layui-btn layui-btn-radius layui-btn-normal" lay-submit lay-event="search">
                <i class="layui-icon">&#xe615;查询</i>
            </button>
        </div>
        <div class="layui-card-body">
            <table id="LAY-table" class="layui-table layui-inline" lay-filter="LAY-table"></table>
        </div>
        <!-- other: 表格行数据按钮组-->
        <div id="LAY-table-row-bar" class="layui-btn-group layui-hide">
            <button type="button" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-normal" lay-event="edit">
                <i class="layui-icon">&#xe642;编辑</i>
            </button>
            <button type="button" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-danger" lay-event="delete">
                <i class="layui-icon">&#xe640;删除</i>
            </button>
        </div>
    </div>
</div>

<script type="text/javascript" src="../../layuiadmin/layui/layui.all.js"></script>
<script type="text/javascript" src="../../layuiadmin/default.js"></script>
<script type="text/javascript" src="../../js/utils.js"></script>
<script>

    // layui
    layui.use(['table', 'form', 'util'], function () {
        // do something ...
        let form = layui.form,
            table = layui.table,
            util = layui.util;
        // form.render("select");

        /*静态变量*/
        const pre = '/goods', dictItem = 'dictItem';

        const server = {
            list: pre + '/list',
            add: pre + '/add',
            update: pre + '/update',
            del: pre + '/delete',
            listByName: pre + '/listByName',
            listByCode: dictItem + '/listByCode'
        }
            , htmlDiv = 'goods-div.html';

        // 初始化搜索栏
        $('[name=search-type-val]').empty();
        $.get(server.listByCode + '/RO_GOODS_TYPE', function (data, resStatus) {
            if (data.code === 0 && data.data.length != 0) {
                $('[name=search-type-val]').append(new Option("请选择", ""));
                $.each(data.data, function (index, item) {
                    $('[name=search-type-val]').append(new Option(item.name, item.value));
                });
            }
            form.render("select");
        });

        /**
         * tableIns: 表格返回值
         * winIndex: 弹出层索引
         */
        let tableIns;

        /*-----------[table]-----------*/
        tableIns = table.render({
            elem: '#LAY-table',
            url: server.list,
            autoSort: false,
            cols: [     [
                {field: 'id', title: 'ID', hide: true},
                {field: 'name', title: '商品名称'},
                {field: 'type', title: '类别'},
                {field: 'price', title: '当前价格'},
                {field: 'historyMaxPrice', title: '历史最高价'},
                {field: 'historyMinPrice', title: '历史最低价'},
                {field: 'purchasePrice', title: '购买价格'},
                {field: 'salePrice', title: '适合出售价格'},
                {field: 'salable', title: '是否适合出售', templet: function (d) {
                        return d.salable == 1 ? '是' : '否';
                    }
                },
                {field: 'place', title: '掉落怪', templet: function (d) {
                    if(d.place != null && d.monster != null){
                        return d.place + " - " + d.monster ;
                    }else{
                        return " - ";
                    }

                }},
                {width: 200, align: 'center', title: '操作', toolbar: '#LAY-table-row-bar'}
            ]],
            limit:50
        });

        // 表格头工具栏监听
        table.on('toolbar(LAY-table)', function (obj) {
            switch (obj.event) {
                case 'add':
                    win.open('新增', htmlDiv);
                    break;
                case 'search':
                    tableIns.reload({
                        where: {
                            data: {
                                type: $('[name=search-type-val]').val() == '' ? null : $('[name=search-type-val]').val(),
                                name: $('[name=search-name-val]').val() == '' ? null : $('[name=search-name-val]').val()
                            }
                        }
                    });
                    break;
                default:
                    break;
            }
        });

        // 商品列表 - 一次性把所有商品查询出来
        $.get(server.listByName + '?name=', function (res) {
            $('[name="search-name-val"]').empty();
            $('[name="search-name-val"]').append(new Option("商品", ""));
            $.each(res.data, function (index, item) {
                $('[name="search-name-val"]').append(new Option(item.name, item.name));
            });

            form.render("select");
        });

        //  行工具监听
        table.on('tool(LAY-table)', function (obj) {
            switch (obj.event) {
                case 'edit':
                    win.open('编辑', htmlDiv, obj.data.id);
                    break;
                case 'delete':
                    layer.confirm('确认删除吗?', {icon: 2, title: '删除'}, function (index) {
                        $.get(server.del + '/' + obj.data.id, function (res) {
                            if (res.code !== 0) {
                                layer.msg('操作出错:[' + data.message + ']', {icon: 5});
                            } else {
                                layer.msg('操作成功', {icon: 6});
                                tableIns.reload();
                                layer.close(index);
                            }
                        });
                    });
                    break;
                default:
                    break;
            }
        });


        /*-----------[form]-----------*/

        /*-----------[弹出层]-----------*/
        /*const win = {
            open: function (title, id) {
                return layer.open({
                    type: 2,
                    title: title,
                    area: ['550px', '550px'],
                    content: htmlDiv,
                    btn: ['提交', '重置', '关闭'],
                    yes: function (index, layero) {
                        layero.find('iframe').contents().find('#LAY-form-submit').click();

                        return false; //禁止点击该按钮关闭
                    },
                    btn2: function (index, layero) {
                        return false;
                    },
                    success: function (layero, index) {
                        $('#LAY-form-display').removeClass('layui-hide');
                        // 触发详情
                        if (id){
                            // 给id标签赋值
                            let body = layer.getChildFrame('body', index);
                            body.find('[name="id"]').val(id);
                            // 触发按钮获取详情
                            let btn = layero.find('iframe').contents().find("#getBtn");
                            btn.click();
                        }
                        //form.render();
                    }
                });
            },
            close: function (index) {
                layer.close(index);
            }
        };*/

    });
</script>

</body>
</html>